<template>
	<view class="">
		<view class="container">
			<view class="main">
				<view class="title u-flex u-col-center u-row-between">
					<view class="tl">
						联系信息
					</view>
					<view class="tr u-flex u-col-center u-row-right"
						@click="$pageTo('/pages/user/addressList?types=release')">
						<text>切换/选择</text>
						<image src="@/static/qh.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="list" v-if="personInfo.gameZoneName">
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">
							大区名称
						</view>
						<view class="r">
							{{personInfo.gameZoneName}}
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">
							角色ID
						</view>
						<view class="r">
							{{personInfo.account}}
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">
							微信号/手机号
						</view>
						<view class="r">
							{{personInfo.wechat}}
						</view>
					</view>
				</view>
			</view>
			<view class="main">
				<view class="title u-flex u-col-center u-row-between">
					<view class="tl">
						道具信息
					</view>
				</view>
				<view class="list">
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">
							类型
						</view>
						<view class="r">
							{{dataInfo.type==1?'我要收购':'我要出售'}}
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">
							道具名称
						</view>
						<view class="r">
							{{dataInfo.name}}
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">
							价格<text>(MHB)</text>
						</view>
						<view class="r">
							<view class="pa" v-if="dataInfo.price">
								<text class="p" :class="{'p1':getPriceLength(dataInfo.price)<6,'p2':
									getPriceLength(dataInfo.price)==6,'p3'
									:getPriceLength(dataInfo.price)==7,'p4'
									:getPriceLength(dataInfo.price)==8,'p5'
									:getPriceLength(dataInfo.price)>=9,}">{{$numToLocaleString(dataInfo.price)}}</text>
							</view>
							<view class="pb">
								{{getBig(dataInfo.price)}}
							</view>
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">
							图片
						</view>
						<view class="r" @click="$previewImage([dataInfo.image],0)">
							<image :src="dataInfo.image" mode="aspectFill"></image>
						</view>
					</view>
					<view class="item u-flex u-col-top u-row-between">
						<view class="l">
							上架天数
						</view>
						<view class="r">
							{{dataInfo.upday}}
						</view>
					</view>
				</view>
			</view>
			<view class="f-price u-flex u-col-center u-row-between">
				<view class="l">
					所需商人币
				</view>
				<view class="r">
					{{dataInfo.upday* coin}}
				</view>
			</view>
			<view class="tips">
				<view class="" v-html="content"></view>
			</view>

			<uni-popup ref="popup" type="center">
				<view class="m-pop2">
					<view class="t">
						确认支付
					</view>
					<view class="p">
						是否确认支付<text> {{dataInfo.upday* coin}} </text>商人币？
					</view>
					<view class="btns u-flex u-col-center u-row-between">
						<view class="btn btn1" @click="close">
							暂不
						</view>
						<view class="btn btn2" @click="submit">
							确认支付
						</view>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="popup1" type="center">
				<view class="m-pop2">
					<view class="p">
						商人币不足，请充值后再发布报价
					</view>
					<view class="btns u-flex u-col-center u-row-between">
						<view class="btn btn1" @click="close2">
							暂不
						</view>
						<view class="btn btn2" @click="$pageTo('/pages/user/money')">
							去充值
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<view class="" style="height: 200rpx;"></view>
		<view class="footer-con" v-if="objdata.from == 'edit'">
			<view class="rem u-flex u-col-center" @click="rem=!rem">
				<image src="@/static/c6.png" mode="aspectFill" v-if="rem"></image>
				<image src="@/static/c1.png" mode="aspectFill" v-else></image>
				<text class="t1">我已阅读并同意</text>
				<text class="t2" @click.stop="$pageTo(`/pages/user/article?type=coinrule`)">商人币使用规则</text>
			</view>
			<view class="f-btn" @click="confirm">
				确认
			</view>
		</view>
		<view class="footer-con" v-else>
			<view class="rem u-flex u-col-center" @click="rem=!rem">
				<image src="@/static/c6.png" mode="aspectFill" v-if="rem"></image>
				<image src="@/static/c1.png" mode="aspectFill" v-else></image>
				<text class="t1">我已阅读并同意</text>
				<text class="t2" @click.stop="$pageTo(`/pages/user/article?type=coinrule`)">商人币使用规则</text>
			</view>
			<view class="f-btn" @click="pay">
				立即支付 {{dataInfo.upday * coin}} 商人币
			</view>
		</view>
	</view>
</template>

<script>
	import {
		webconfig,
		accountList,
		getUserinfo,
		quotationAdd,
		quotationEdit,
		quotationEditAll,
		quotationUp
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				rem: true,
				content: ``,
				dataInfo: {},
				personInfo: {},
				objdata: {},
				coin:0
			}
		},
		onLoad(option) {
			this.objdata = JSON.parse(decodeURIComponent(option.obj))
			console.log(this.objdata);
		},
		onShow() {
			let data = uni.getStorageSync('releaseData');
			this.dataInfo = this.objdata
			if (uni.getStorageSync('addressData')) {
				let addressData = uni.getStorageSync('addressData');
				this.personInfo = addressData
			} else {
				this.getlist()
			}
			this.getwebconfig()
		},
		computed: {
			getPriceLength() {
				return (data) => {
					if (!data) return 1

					function getDigitCount(num) {
						if (num === 0) return 1;

						num = Math.abs(parseInt(num)); // 忽略小数部分，只处理整数
						return Math.floor(Math.log10(num)) + 1;
					}
					let l = getDigitCount(data)
					return l

				}
			},
			getBig() {
				return (data) => {
					if (data) {
						return numberToChinese(data)
					} else {
						return ''
					}

					function numberToChinese(num) {
						// 限制范围：0到999999999
						if (num < 0 || num > 999999999) return '超出范围';

						// 定义中文数字和单位
						const digits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
						const units = ['', '十', '百', '千']; // 个级单位
						const bigUnits = ['', '万', '亿']; // 大单位：个、万、亿

						// 处理0的情况
						if (num === 0) {
							return '零两整';
						}

						// 转换为整数并补零到9位（亿级1位+万级4位+个级4位）
						const str = Math.floor(num).toString().padStart(9, '0');
						// 拆分三级：亿级(0-0)、万级(1-4)、个级(5-8)
						const levels = [
							str.slice(0, 1), // 亿级
							str.slice(1, 5), // 万级
							str.slice(5, 9) // 个级
						];

						let result = '';

						// 处理每一级
						levels.forEach((level, index) => {
							if (level === '0000' && index !== 0) return; // 跳过空的万级和个级

							let levelStr = '';
							// 处理当前级的每一位
							for (let i = 0; i < level.length; i++) {
								const digit = parseInt(level[i]);
								if (digit !== 0) {
									levelStr += digits[digit] + units[level.length - 1 - i];
								} else {
									// 只在非末尾且前一位不是零的情况下加零
									if (i !== level.length - 1 && levelStr[levelStr.length - 1] !== '零') {
										levelStr += '零';
									}
								}
							}

							// 去除当前级末尾的零
							levelStr = levelStr.replace(/零+$/, '');

							// 如果当前级有内容，添加对应的大单位（万、亿）
							if (levelStr) {
								result += levelStr + bigUnits[2 - index];
							}
						});

						// 处理连续的零
						result = result.replace(/零+/g, '零');
						// 去除可能的开头或结尾零
						result = result.replace(/^零+|零+$/g, '');

						// 添加金额单位
						return result + '两整';
					}

				}
			}
		},
		methods: {
			getwebconfig() {
				webconfig({}).then(res => {
					if (res.code == 200) {
						this.content = res.data.coinrule
						this.coin = res.data.coin
					}
				})
			},
			getlist() {
				accountList({
					page: 1
				}).then(res => {
					if (res.code == 200) {
						let list = res.data.list
						let index = list.findIndex(item => item.isDefault == 1)
						if (index > -1) {
							let addressData = list[index]
							this.personInfo = addressData
						}
					}
				})
			},
			// 点击确认
			confirm() {
				if (!this.personInfo.gameZoneName) {
					this.$modal.msg('请选择游戏区服')
					return
				}
				if (!this.rem) {
					this.$modal.msg('请阅读并同意规则')
					return
				}
				if (this.objdata.status_up == 3 || this.objdata.status == 4) {

					let paytype = 1 //支付方式 1抖音 2微信
					// #ifdef MP-WEIXIN
					paytype = 2
					// #endif
					// #ifdef MP-TOUTIAO
					paytype = 1
					// #endif
					getUserinfo({}).then(res => {
						if (res.code == 200) {
							if (this.dataInfo.upday <= res.data.coin) {
								uni.showModal({
									title: '温馨提示',
									content: `需支付${this.dataInfo.upday}商人币,确认修改并上架吗?`,
									success: (res) => {
										if (res.confirm) {
											this.$throttling(() => {
												quotationEditAll({
													type: this.dataInfo.type,
													id: this.dataInfo.id,
													name: this.dataInfo.name,
													price: this.dataInfo.price,
													image: this.dataInfo.image,
													upday: this.dataInfo.upday,
													account: this.personInfo.account,
													wechat: this.personInfo.wechat,
													game_zone_name: this.personInfo
														.gameZoneName,
													paytype: paytype,
												}).then(res => {
													if (res.code == 200) {
														uni.removeStorageSync(
															'addressData');
														uni.redirectTo({
															url: '/pages/user/success'
														})
													}
												})
											})
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
							} else {
								this.$modal.msg('商人币不足')
							}
						}
					})
				} else {
					quotationEdit({
						type: this.dataInfo.type,
						id: this.dataInfo.id,
						name: this.dataInfo.name,
						price: this.dataInfo.price,
						image: this.dataInfo.image,
						upday: this.dataInfo.upday,
						game_zone_name: this.personInfo.gameZoneName,
						account: this.personInfo.account,
						wechat: this.personInfo.wechat,
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '修改成功',
								icon: "none"
							});
							uni.removeStorageSync('addressData');
							setTimeout(() => {
								uni.reLaunch({
									url: `/pages/user/order/orderList`
								})
							}, 500)
						}
					})
				}
			},
			pay() {
				if (!this.personInfo.gameZoneName) {
					this.$modal.msg('请选择游戏区服')
					return
				}
				if (!this.rem) {
					this.$modal.msg('请阅读并同意规则')
					return
				}
				getUserinfo({}).then(res => {
					if (res.code == 200) {
						let userCoin = res.data.coin
						if (userCoin >= this.dataInfo.upday) {
							this.$refs.popup.open()
						} else {
							this.$refs.popup1.open()
						}
					}
				})
			},
			close() {
				this.$refs.popup.close()
			},
			close2() {
				this.$refs.popup1.close()
			},
			// 立即支付
			submit() {
				let paytype = 1 //支付方式 1抖音 2微信
				// #ifdef MP-WEIXIN
				paytype = 2
				// #endif
				// #ifdef MP-TOUTIAO
				paytype = 1
				// #endif
				quotationUp({
					id: this.dataInfo.id,
					upday: this.dataInfo.upday,
					coin: this.dataInfo.upday,
					game_zone_name: this.personInfo.gameZoneName,
					account: this.personInfo.account,
					wechat: this.personInfo.wechat,
					paytype: paytype,
				}).then(res => {
					if (res.code == 200) {
						uni.removeStorageSync('addressData');
						uni.showToast({
							title: '上架成功',
							icon: "none"
						});
						setTimeout(() => {
							uni.reLaunch({
								url: `/pages/user/order/orderList`
							})
						}, 500)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	$color: #FF6F07;

	.footer-con {
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #fff;
		padding: 30rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 9;
		box-sizing: border-box;
		min-height: 200rpx;

		.f-btn {
			line-height: 100rpx;
			font-size: 32rpx;
			color: #fff;
			height: 100rpx;
			background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);
			border-radius: 20rpx;
			text-align: center;
			width: 100%;
			margin-top: 20rpx;
		}

		.rem {
			image {
				width: 28rpx;
				height: 28rpx;
				display: inline-block;
			}

			text {
				font-size: 20rpx;
				color: #D1D1D6;
				margin-left: 10rpx;
			}

			.t2 {
				color: $color;
			}
		}
	}

	.container {
		padding: 20rpx 30rpx 0rpx;

		.tips {
			padding-top: 20rpx;
			font-size: 26rpx;
			color: #AEAEAE;
			line-height: 40rpx;

		}

		.m-pop2 {
			width: 620rpx;
			height: 400rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			flex-direction: column;
			box-sizing: border-box;
			padding: 60rpx 40rpx 20rpx;
			background: #fff;
			border-radius: 20rpx;

			.t {
				line-height: 44rpx;
				height: 44rpx;
				font-size: 40rpx;
				color: #000000;
				text-align: center;
				font-weight: 600;
			}

			.p {
				margin-top: 60rpx;
				line-height: 44rpx;
				height: 44rpx;
				font-size: 32rpx;
				color: #000000;
				text-align: center;

				text {
					color: $color;
				}
			}

			.btns {
				width: 100%;
				margin-top: 50rpx;

				.btn {
					text-align: center;
					font-size: 32rpx;
					width: calc(50% - 10rpx);
					height: 90rpx;
					line-height: 90rpx;
					border-radius: 20rpx;
				}

				.btn1 {

					background: #F9F9F9;
					color: #D1CDCD;
				}

				.btn2 {
					color: #fff;
					background: linear-gradient(270deg, #FF6F07 0%, #FFA666 100%);

				}
			}
		}



		.f-price {
			background-color: #fff;
			padding: 20rpx 30rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.l {
				color: #11192D;
				font-size: 32rpx;
			}

			.r {
				color: #11192D;
				font-size: 28rpx;
			}
		}

		.main {
			background-color: #fff;
			padding: 20rpx 30rpx;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.list {
				margin-top: 20rpx;

				.item {
					padding: 10rpx 0;

					.l {
						height: 40rpx;
						line-height: 40rpx;
						font-size: 28rpx;
						color: #979797;
						text {
							font-size: 20rpx;
							margin-left: 10rpx;
						}
					}

					.r {
						flex: 1;
						width: 1rpx;
						text-align: right;
						line-height: 40rpx;
						color: #11192D;
						font-size: 28rpx;

						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 12rpx;
							overflow: hidden;
						}

						.pa {
							text-align: right;

							.p {
								font-family: "DIN";
								font-weight: bold;
								font-size: 36rpx;
								text-align: right;

							}

							.p5 {
								color: #FF70A4;
							}

							.p4 {
								color: #840FFB;
							}

							.p3 {
								color: #FE1515;
							}

							.p2 {
								color: #1EC742;
							}

							.p1 {
								color: #11192D;
							}
						}

						.pb {
							line-height: 30rpx;
							height: 30rpx;
							font-size: 20rpx;
							color: #979797;

						}
					}
				}
			}

			.title {
				height: 40rpx;
				line-height: 40rpx;

				.tl {
					font-size: 32rpx;
					color: #11192D;
				}

				.tr {
					text {
						font-size: 28rpx;
						color: $color;
					}

					image {
						width: 28rpx;
						height: 28rpx;
					}
				}

			}
		}
	}
</style>